<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="backText"></block>
            <block slot="content">{{ navList[TabCur].name }}</block>
        </cu-custom>

        <!-- tab -->
        <scroll-view scroll-x class="bg-white nav text-center" :style="{top:CustomBar+'px'}">
            <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in navList" :key="index"
                @tap="tabSelect" :data-id="index">
                {{ item.name }}
            </view>
        </scroll-view>

        <!-- 卡片 -->
        <view class="cu-card case" v-for="(item,index) in navList[TabCur].list" :key="index" @click="toNav('/pages/goods/adopt?post_id=' + item.post_id)">
            <view class="cu-item shadow">
                <view class="image">
                    <image :src="item.imageArray[0]" mode="widthFix"></image>
                    <view class="cu-tag bg-blue" v-if="item.type == 1">领养</view>
                    <view class="cu-tag bg-blue" v-if="item.type == 2">救助</view>
                    <view class="cu-tag bg-blue" v-if="item.type == 3">丢失</view>
                    <view class="cu-tag bg-blue" v-if="item.type == 4">帮助</view>
                    <view class="cu-bar bg-shadeBottom">
                        <text class="text-cut">{{ item.content }}</text>
                        <!-- <text class="text-cut">{{ item.city }}</text> -->
                    </view>
                </view>
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar round lg" v-if="item.poster.avatar" :style="{'background-image':'url(' + item.poster.avatar + ')'}"></view>
                        <view class="cu-avatar round lg" v-else></view>
                        <view class="content flex-sub">
                            <view class="text-grey">{{ item.poster.nickname }}</view>
                            <view class="text-gray text-sm flex justify-between">
                                {{ item.createtime_text | formatDate }}
                                <view class="text-gray text-sm">
                                    <text class="cuIcon-attentionfill margin-lr-xs"></text> {{ item.view }}
                                    <text class="cuIcon-appreciatefill margin-lr-xs"></text> {{ item.like.number }}
                                    <text class="cuIcon-messagefill margin-lr-xs"></text> {{ item.replies }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="padding flex justify-between">
                    <view>
                        <text class='cuIcon-locationfill text-orange'></text>
                        <text class='text-orange'>{{ item.address }}</text>
                    </view>
                    <view class="text-blue text-sm text-right" v-if="location">距离您当前{{ item.distance.toFixed(2) }}km</view>
                </view>
            </view>
        </view>

        <!-- 加载 -->
        <view class="cu-load load-modal" v-if="loadModal">
            <!-- <view class="cuIcon-emojifill text-orange"></view> -->
            <image src="/static/logo.png" mode="aspectFit"></image>
            <view class="gray-text">加载中...</view>
        </view>
        <roof></roof>
    </view>
</template>

<script>
	import Roof from '../roof/index.vue';
    import {
        mapState,
        mapActions
    } from 'vuex';
    export default {
        data() {
            return {
                cardCur: 0,
                TabCur: 0,
                scrollLeft: 0,
                CustomBar: this.CustomBar,
                navList: [{
                    name: '领养',
                    page: 1,
                    list: [],
                    last_page: 1,
                    refresh: true
                }, {
                    name: '救助',
                    page: 1,
                    list: [],
                    last_page: 1,
                    refresh: true

                }, {
                    name: '丢失',
                    page: 1,
                    list: [],
                    last_page: 1,
                    refresh: true
                }, {
                    name: '帮助',
                    page: 1,
                    list: [],
                    last_page: 1,
                    refresh: true
                }],
                loadModal: false, //加载
            }
        },
		components: {
		    Roof
		},
        onShow() {
            this.getHomeList(true);
            console.log("success")
        },
        onHide() {
            console.log("hehe")
        },
        onLoad(option) {
            console.log(option);
            this.TabCur = option.id;

        },
        computed: {
        	...mapState(['location'])
        },
        onReachBottom() {
            this.getHomeList();
        },
        filters: {
            formatDate(time) {
                return time.substring(0, 10)
            }
        },
        methods: {
            cardSwiper(e) {
                this.cardCur = e.detail.current
            },
            tabSelect(e) {
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
                this.getHomeList();
            },
            toNav(link) {
                uni.navigateTo({
                    url: link
                })
            },
            getHomeList(reset = false) { //获取列表
                if (reset) {
                    this.navList.forEach(e => {
                        e.refresh = true;
                        e.page = 1;
                        e.last_page = 1;
                    })
                }
                console.log(1)
                let navIndex = this.navList[this.TabCur];

                console.log(navIndex.last_page, navIndex.page, navIndex.refresh)

                if (this.loadModal) { //防止多次刷新
                    return;
                }

                if (navIndex.last_page < navIndex.page && !navIndex.refresh) {
                    //最后一页和当前页面相同就不返回
                    //refresh为false说明已经不是第一次点进去了,满足2个条件只有一种可能,就是没有下一页了
                    uni.showToast({
                        title: '没有更多内容',
                        icon: 'none'
                    })

                    return;
                }
                console.log(2)
                this.loadModal = true;

                this.$http.post('getHomeList', {
                    type: this.TabCur * 1 + 1,
                    limit: 10,
                    page: navIndex.page,
                    lat: this.location ? this.location.latitude : '',
                    lng: this.location ? this.location.longitude : ''
                }).then(res => {
                    console.log(3)
                    navIndex.last_page = res.data.last_page;

                    if (navIndex.page <= navIndex.last_page) {
                        navIndex.page++;
                    }

                    if (navIndex.refresh) { //为true表示第一次加载 
                        navIndex.list = res.data.data; //把数据直接放进去 还是清空,前面的数据 刷新用
                        navIndex.refresh = false;
                    } else {

                        //不是第一次加载,push进去
                        res.data.data.forEach(e => {
                            navIndex.list.push(e);
                        })
                    }

                    this.loadModal = false;

                    console.log(navIndex, res.data.data)
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .homeTabs {
        .pic {
            display: block;

            margin: 0 auto;

            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;

            overflow: hidden;
        }

        .text {
            text-align: center;
            font-size: 32rpx;
            color: #333;

            margin-top: 16rpx;
        }
    }


    .nav {
        position: sticky;
        top: 50px;
        z-index: 999;
    }
</style>
